<!DOCTYPE html>
<html lang="zh-CN"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>租车网首页</title>
    <link rel="stylesheet" th:href="@{/res/layui/css/layui.css}">
    <!--引入awesome图标库的样式表-->
    <link rel="stylesheet" th:href="@{/res/font-awesome-4.7.0/css/font-awesome.css}">
</head>

<style>


</style>

<body>

    <!---定义最外面的容器,container-->
    <div class="layui-col-md12" style="padding: 0px; background-color: #F2F2F2;">
        
        <!--以下包含导航栏页面-->
        <ul th:replace="commons/nav :: common_nav">

        </ul>

        <!--下面是车型查询的容器-->
        <div class="layui-container" style="background-color: #F2F2F2;">

            <!--左侧菜单栏-->
            <div class="layui-col-md3">
                <ul class="layui-nav layui-nav-tree layui-bg-cyan layui-inline" lay-filter="demo" id="carCatalog">
                    <!--每一个li就是一个菜单项-->
                    <!--循环的开始-->
                    <li th:each="map:${menu.typeMap}" class="layui-nav-item layui-nav-itemed">
                        <a href="javascript:;"><span th:text="${map.key}"></span></a>
                        <dl class="layui-nav-child" th:each="b:${map.value}">
                            <dd th:if="${b}==${brandName} and ${map.key}==${typeName}" class="layui-this"><a th:href="@{/users/toSearch(type=${map.key},brand=${b})}"><span th:text="${b}"></span></a></dd>
                            <dd th:if="${b}!=${brandName} or ${map.key}!=${typeName}"><a th:href="@{/users/toSearch(type=${map.key},brand=${b})}"><span th:text="${b}"></span></a></dd>
                        </dl>
                    </li>
                    <!--循环的结束-->

                </ul>
            </div>

            <!---右侧查询结果-->
            <div class="layui-col-md9">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <!--以下是面包屑-->
                        <div class="layui-card-header">
                            <span class="layui-breadcrumb">
                                <a><cite>全部</cite></a>
                                <a id="currentType" href="#"></a>
                                <a id="currentBrand" href="#"></a>
                            </span>
                        </div>

                        <div class="layui-card-body" id="searchResult">
                            <!--下面是一辆车的详情的表格  -->
                            <div>
                                <table class="layui-table" lay-skin="nob">

                                    <!--循环的开始-->
                                    <tr th:each="c:${carsList}">
                                        <td width="30%">
                                            <dl>
                                                <dt><img th:src="@{/res/images/car02.jpg}" width="120" height="120"></dt>
                                                <dd>
                                                    <div id="test1"></div>
                                                </dd>
                                            </dl>
                                        </td>
                                        <td width="50%" th:text="${c.information}">

                                        </td>
                                        <td><button class="layui-btn layui-btn-normal">立即下单</button></td>
                                    </tr>
                                    <!--循环的结束-->


                                </table>
                            </div>

                        </div>



                    </div>
                    <!--以下是分页组件-->
                    <div id="mypager"></div>

                </div>

            </div>

        </div>

    </div>

    <!--网站页面尾部开始-->
    <div id="footer" class="layui-col-md12" style=" background-color: #666; height:120px;">
        <div class="copyright" style=" background-color: #666; height:120px;">
            <div class="layui-col-md4" style="text-align: right">
                <b style="color: rgb(34, 34, 34); font-size: 32px; display: block;">
                    <font color="#ff6537" style="color: rgb(255, 101, 55);">预订说明</font>
                </b>
                <b style="color: rgb(34, 34, 34); font-size: 32px; display: block;"><span style="color: rgb(255, 255, 255); font-size: 15px; font-weight: normal;">让车拥有和使用更便捷、更实惠</span><span
                        style="">
                        <font face="Arial">
                            <font color="#dcdcdc" style="color: rgb(220, 220, 220);"><br></font>
                        </font>
                    </span>
                </b>
                <b style="color: rgb(34, 34, 34); font-size: 32px;  display: block;">
                    <span style="color: rgb(255, 255, 255); font-size: 15px; font-weight: normal;">服务优势</span><span
                        style="">

                    </span>
                </b>
            </div>

            <div class="layui-col-md4">
                <div>
                    <b style="color: rgb(34, 34, 34); font-size: 32px; text-align: center; display: block;">
                        <font color="#ff6537" style="color: rgb(255, 101, 55);">联系我们</font>

                    </b>
                    <b style="color: rgb(34, 34, 34); font-size: 32px; text-align: center; display: block;"><span style="color: rgb(255, 255, 255); font-size: 15px; font-weight: normal;">让车拥有和使用更便捷、更实惠</span><span
                            style="">
                            <font face="Arial">
                                <font color="#dcdcdc" style="color: rgb(220, 220, 220);"><br></font>
                            </font>
                        </span>
                    </b>

                    <b style="color: rgb(34, 34, 34); font-size: 32px; text-align: center; display: block;">
                        <span style="color: rgb(255, 255, 255); font-size: 15px; font-weight: normal;">服务优势</span><span
                            style="">

                        </span>
                    </b>
                </div>

            </div>

            <div class="layui-col-md4">
                <div>
                    <b style="color: rgb(34, 34, 34); font-size: 32px; text-align: left; display: block;">
                        <font color="#ff6537" style="color: rgb(255, 101, 55);">帮助中心</font>

                    </b>
                    <b style="color: rgb(34, 34, 34); font-size: 32px; text-align: left; display: block;"><span style="color: rgb(255, 255, 255); font-size: 15px; font-weight: normal;">让车拥有和使用更便捷、更实惠</span><span
                            style="">
                            <font face="Arial">
                                <font color="#dcdcdc" style="color: rgb(220, 220, 220);"><br></font>
                            </font>
                        </span>
                    </b>

                    <b style="color: rgb(34, 34, 34); font-size: 32px; text-align: left; display: block;">
                        <span style="color: rgb(255, 255, 255); font-size: 15px; font-weight: normal;">服务优势</span><span
                            style="">

                        </span>
                    </b>
                </div>

            </div>
        </div>

        <div class="copyright" style="padding: 20px;color:#FFF; background-color: #666; height:20px; text-align: center">
            ©2018 网站样板-汽车买卖租赁版权所有 &nbsp;&nbsp; [<a th:href="@{/admin/toMain}" style="color:#FFF">后台管理</a>]

        </div>
    </div>
    <!--网站页面尾部结束-->

    <script th:src="@{/res/layui/layui.js}"></script>

    <script th:inline="javascript">
        //一般直接写在一个js文件中
        layui.use(['layer', 'element', 'form', 'laydate','laypage'], function () {
            var layer = layui.layer,
                form = layui.form;
            var element = layui.element;
            var laydate = layui.laydate;
            var laypage = layui.laypage;
            //常规用法
            laydate.render({
                elem: '#test1'
            });


            laypage.render({
                elem: 'mypager',
                count: 70, //数据总数,

                jump: function (obj,first) {

                }

            });



        });
    </script>
</body>

</html>